<template>
    <div>
        <el-form :inline="!!inline" :model="form" class="demo-form-inline" label-width="150px" :style="{width: width}">
            <el-form-item v-for="(k,i) in formList" :key="i" :label="k.label">
                <form-input 
                    v-if="k.type === 'input'" 
                    v-model="form[k.param]"
                    :value="form[k.param]"
                    :placeholder="k.label"
                ></form-input>
                <el-input v-if="k.type === 'inputPassword'" v-model="form[k.param]" :placeholder="k.label" type="password"></el-input>
                <el-select v-if="k.type === 'select'" v-model="form[k.param]" :placeholder="k.label" style="width: 100%;">
                    <el-option v-for="(item, idx) in k.getInitList" :key="idx" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item> 
                <el-button type="primary" @click="onSubmit">
                    <slot name="ok">确认</slot>
                </el-button>
                <el-button>
                    <slot name="cancel">返回</slot>
                </el-button>
            </el-form-item>
        </el-form>
        <slot name="other"></slot>
    </div>
</template>

<script>
/**
 * list: [
 *    {
 *        label: "",
 *        param: "",
 *        type: "", // input select textArea radio 
 *        getInitList: () => [], // 调用处获取数据
 *        editShow: '', // '编辑'/ 保存
 *        editSave: (item) => { return },
 *        edit: (item) => {},
 *        components: <Select />
 *    }
 * ]
 */
import FormInput from './FormInput.vue'
export default {
    props: ["formList", 'inline', 'form', 'width'],
    data() {
        return {
            formItem: this.form
        }
    },
    components: { FormInput },
    mounted() {
        
    },
    methods: {
        onSubmit() {
            console.log(JSON.parse(JSON.stringify(this.form)), 'submitItem')
            return JSON.parse(JSON.stringify(this.form))
        }    
    }
}
</script>
<style>

</style>